<template>
    <div>
        <h2>售后</h2>
        <el-card style="height: 70px">
            <div style="width: 100%;height: 50px;">
                <el-row>
                    <el-col :span="21">
                        <a style="font-size: 20px;">众哲鑫商城</a>
                    </el-col>
                    <el-col :span="3">
                        <el-divider direction="vertical"></el-divider>
                        <el-button style="border: 0px;font-size: 20px">售后设置</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="订单搜索">
                    <el-input v-model="formInline.orderId" placeholder="订单编号" suffix-icon="el-icon-search"></el-input>
                </el-form-item>
                <el-form-item label="售后类型">
                    <el-select v-model="formInline.type" placeholder="全部">
                        <el-option label="已完成" value="shanghai"></el-option>
                        <el-option label="未完成" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发货状态">
                    <el-select v-model="formInline.status" placeholder="全部">
                        <el-option label="已发货" value="shanghai"></el-option>
                        <el-option label="已付款" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="formInline.name" placeholder="搜索商品名称" suffix-icon="el-icon-search"></el-input>
                </el-form-item><br>
                <el-form-item label="申请时间">
                    <el-date-picker
                            v-model="time"
                            type="daterange"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-select v-model="formInline.userName" placeholder="全部" prefix-icon="el-icon-search">
                        <el-option label="张三" value="shanghai"></el-option>
                        <el-option label="王丽霞" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="commodity"></div>
        <el-card>
            <div style="width: 30%;display: inline-block;vertical-align: top;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="全部" name="first"></el-tab-pane>
                    <el-tab-pane label="待受理" name="second"></el-tab-pane>
                    <el-tab-pane label="待收货" name="third"></el-tab-pane>
                    <el-tab-pane label="售后中" name="fourth"></el-tab-pane>
                    <el-tab-pane label="已完成" name="fifth"></el-tab-pane>
                    <el-tab-pane label="已驳回" name="sixth"></el-tab-pane>
                </el-tabs>
            </div>
            <div style="width: 69%;display: inline-block;vertical-align: top;" align="right">
                <el-button type="primary">导出</el-button>
            </div>
            <div>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="售后商品">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="客户">
                    </el-table-column>
                    <el-table-column
                            prop="orderType"
                            label="订单类型"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="consignmentStatus"
                            label="发货状态">
                    </el-table-column>
                    <el-table-column
                            prop="receipts"
                            label="实际收款">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="售后类型">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="售后状态">
                    </el-table-column>
                    <el-table-column
                            prop="message"
                            label="售后原因">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <el-button type="text" @click="view = true">查看</el-button>
                    </el-table-column>
                </el-table>

                <el-dialog title="订单详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="售后商品">
                            <el-input v-model="form.name" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户">
                            <el-input v-model="form.userName" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单类型">
                            <el-input v-model="form.orderType" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="发货状态">
                            <el-input v-model="form.consignmentStatus" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="实际收款">
                            <el-input v-model="form.receipts" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="售后类型">
                            <el-input v-model="form.type" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="售后状态">
                            <el-input v-model="form.status" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="售后原因">
                            <el-input v-model="form.message" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="agree">同意退款</el-button>
                            <el-button type="danger" @click="reject = true">驳回退款</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <el-dialog title="驳回理由" :visible.sync="reject" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="forms" label-width="80px">
                        <el-form-item label="驳回理由">
                            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="forms.message">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="close">取消</el-button>
                            <el-button type="danger" @click="onsubmit">驳回</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>


        </el-card>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            formInline: {
                orderId: '',
                type: '',
                status: '',
                name: '',
                time: '',
                userName: ''
            },

            activeName: 'first',
            tableData: [{
                name: '笔记本',
                userName: '赵晓黑',
                orderType: '已支付',
                consignmentStatus: '已发货',
                receipts: '500',
                type: '退款',
                status: '待处理',
                message: '七天无理由退换货'
            }],
            view: false,
            form: {
                name: '笔记本',
                userName: '赵晓黑',
                orderType: '已支付',
                consignmentStatus: '已发货',
                receipts: '500',
                type: '退款',
                status: '待处理',
                message: '七天无理由退换货'
            },
            reject: false,
            forms: {
                message: '',
            }
        }
    },
    methods: {
        agree() {
            this.$confirm('是否同意退款', '信息', {
                confirmButtonText: '同意',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                        message: '退款成功',
                        type: 'success'
                    })
                    this.view = false
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
        },
        onsubmit() {
            this.reject = false
            this.$message({
                message: '驳回退款成功',
                type: 'success'
            })
            this.view = false
        },
        close() {
            this.reject = false
        }

    }
}
</script>

<style scoped>
.commodity {
    height: 20px;
}
</style>